<sqx-modal-dialog (dialogClose)="contentSelect.emit()" flexBody="true" fullHeight="true" size="lg">
    <ng-container title> {{ "chat.title" | sqxTranslate }} </ng-container>
    <ng-container content>
        <div class="scroll-container" #container>
            @for (item of snapshot.chatItems; track item; let isLast = $last; let isFirst = $first) {
                <sqx-chat-item
                    [content]="item.content"
                    (contentSelect)="contentSelect.emit($event)"
                    [copyMode]="copyMode"
                    (done)="setCompleted()"
                    [folderId]="folderId"
                    [isFirst]="isFirst"
                    [isLast]="isLast"
                    [type]="item.type"
                    [user]="user" />
            }
        </div>
    </ng-container>
    <ng-container footer>
        <form (ngSubmit)="ask()">
            <div class="row row-cols-0 g-2">
                <div class="col">
                    <input
                        class="form-control"
                        #input
                        [disabled]="snapshot.isRunning"
                        [ngModel]="snapshot.chatQuestion"
                        (ngModelChange)="setQuestion($event)"
                        [ngModelOptions]="{ standalone: true }"
                        placeholder="{{ 'chat.prompt' | sqxTranslate }}"
                        sqxFocusOnInit />
                </div>

                <div class="col-auto">
                    <button class="btn btn-primary" [disabled]="snapshot.isRunning" type="submit">{{ "chat.ask" | sqxTranslate }}</button>
                </div>
            </div>
        </form>
    </ng-container>
</sqx-modal-dialog>
